
/* 字体粗细公用样式 */
.font_bold{font-weight: bold;}
.font_200{font-weight: 200;}
.font_400{font-weight: 400;}
.font_500{font-weight: 500;}
.font_700{font-weight: 700;}
.font_800{font-weight: 800;}

/* 宽度公用样式 */
.w100{width:100%;}
.w90{width:90%;}
.w80{width:80%;}
.w70{width:70%;}
.w60{width:60%;}
.w50{width:50%;}
.w40{width:40%;}
.w30{width:30%;}
.w20{width:20%;}
.w10{width:10%;}
.h100{height:100%;}

/* 字体对齐公用样式 */
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.text-decoration-line{text-decoration: line-through}
.hide_other{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

/* flex风格布局公用样式 */
.justify-flex-start{justify-content: flex-start}
.justify-flex-end{justify-content: flex-end }
.justify-space-between{justify-content: space-between}
.justify-space-around{justify-content: space-around}
.justify-center {justify-content: center }
.flex{display: flex;}
.center{align-items:center;}
.end{align-items:flex-end;}
.flex-wrap-line {flex-wrap: wrap}
.flex-wrap-reverse {flex-wrap: wrap-reverse}
.flex-direction-column-reverse {flex-direction: column-reverse}
.flex-direction-column {flex-direction: column}
.flex-direction-row-reverse {flex-direction: row-reverse}
.flex1 {flex: 1;}


/* 字体大小公用样式 */
.f20{ font-size: 20px;}
.f22{ font-size: 22px;}
.f24{ font-size: 24px;}
.f28{ font-size: 28px;}
.f32{ font-size: 32px;}
.f30{ font-size: 30px;}
.f36{ font-size: 36px;}
.f40{ font-size: 40px;}

/* 偏移公用样式 */
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}
.mt-70{margin-top:70px;}
.mt-80{margin-top:80px;}
.mt-90{margin-top:90px;}
.mt-100{margin-top:100px;}

.mr-5{margin-right:5px;}
.mr-10{margin-right:10px;}
.mr-20{margin-right:20px;}
.mr-30{margin-right:30px;}
.mr-40{margin-right:40px;}
.mr-50{margin-right:50px;}
.mr-60{margin-right:60px;}
.mr-70{margin-right:70px;}
.mr-80{margin-right:80px;}
.mr-90{margin-right:90px;}
.mr-100{margin-right:100px;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}
.mb-70{margin-bottom:70px;}
.mb-80{margin-bottom:80px;}
.mb-90{margin-bottom:90px;}
.mb-100{margin-bottom:100px;}

.ml-5{margin-left:5px;}
.ml-10{margin-left:10px;}
.ml-20{margin-left:20px;}
.ml-24{margin-left:24px;}
.ml-30{margin-left:30px;}
.ml-40{margin-left:40px;}
.ml-50{margin-left:50px;}
.ml-60{margin-left:60px;}
.ml-70{margin-left:70px;}
.ml-80{margin-left:80px;}
.ml-90{margin-left:90px;}
.ml-100{margin-left:100px;}
.ml-120{margin-left: 120px;}

.p24{ padding: 24px; }

.pt-5{padding-top:5px;}
.pt-10{padding-top:10px;}
.pt-20{padding-top:20px;}
.pt-30{padding-top:30px;}
.pt-40{padding-top:40px;}
.pt-50{padding-top:50px;} 
.pt-60{padding-top:60px;}
.pt-70{padding-top:70px;}
.pt-80{padding-top:80px;}
.pt-90{padding-top:90px;}
.pt-100{padding-top:100px;}

.pr-5{padding-right:5px;}
.pr-10{padding-right:10px;}
.pr-20{padding-right:20px;}
.pr-30{padding-right:30px;}
.pr-40{padding-right:40px;}
.pr-50{padding-right:50px;}
.pr-60{padding-right:60px;}
.pr-70{padding-right:70px;}
.pr-80{padding-right:80px;}
.pr-90{padding-right:90px;}
.pr-100{padding-right:100px;}

.pb-5{padding-bottom:5px;}
.pb-10{padding-bottom:10px;}
.pb-20{padding-bottom:20px;}
.pb-30{padding-bottom:30px;}
.pb-40{padding-bottom:40px;}
.pb-50{padding-bottom:50px;}
.pb-60{padding-bottom:60px;}
.pb-70{padding-bottom:70px;}
.pb-80{padding-bottom:80px;}
.pb-90{padding-bottom:90px;}
.pb-100{padding-bottom:10px;}
.pb-120{padding-bottom:120px;}

.pl-5{padding-left:5px;}
.pl-10{padding-left:10px;}
.pl-20{padding-left:20px;}
.pl-30{padding-left:30px;}
.pl-40{padding-left:40px;}
.pl-50{padding-left:50px;}
.pl-60{padding-left:60px;}
.pl-70{padding-left:70px;}
.pl-80{padding-left:80px;}
.pl-90{padding-left:90px;}
.pl-100{padding-left:100px;}
.pl-120{padding-left:120px;}


/* 倒三角 */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* 分界线 */
.divider{
    background-color: #e5e5e55e;
    height: 1px;
    width: 100%;
	margin: 6px 0;
}